<template>
  <div class="list" ref="wapper">
    <div>
    <div class="current">
      <div class="current-city">当前城市</div>
      <div class="city">
        <div class="button"><p>{{this.$store.state.city}}</p></div>
      </div>
    </div>
    <div class="current">
      <div class="current-city">热门城市</div>
      <div class="city">
        <div class="button" v-for="item of hotlist" @click="headlecitys(item.title)" :key="item.id">
          <p>{{item.title}}</p>
        </div>
      </div>
    </div>
    <div class="current" v-for="item1 of citylist" :ref="item1.title" :key="item1.id">
      <div class="current-city">{{item1.title}}</div>
      <ul class="itemul" v-for="item2 of item1.list" :key="item2.id">
        <li class="itemli">{{item2.title}}</li>
      </ul>
    </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    citylist: Array,
    hotlist: Array,
    letter: String
  },
  methods: {
    headlecitys (citys) {
      this.$store.dispatch('changestatus', citys)
      this.$router.push('/')
    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wapper, {click: true})
  },
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
   .list{
     overflow: hidden;
     position: absolute;
     top: 1.52rem;
     left: 0;
     bottom: 0;
     right: 0;
     .current-city{
       line-height: .56rem;
       background-color: #eee;
       padding-left: .2rem;
       font-size: .28rem;
       color: #666;
     }
     .itemul{
        line-height: .7rem;
        .itemli{
          padding-left: .2rem;
        }
     }
     .city{
       padding: .1rem;
       overflow: hidden;
       .button{
         width: 30%;
         float: left;
         &:before{
           border-color:#ccc;
         }
         P{
           padding: .1rem 0;
           text-align: center;
           margin: .1rem;
           border: .02rem solid #ccc;
         }
       }
     }
   }
</style>
